<template>
    <div>
        <ul class="steps">
            <li class="step-item" 
                v-for="(item, index) in props.data" 
                :key="index" 
                @click="props.clickStep && handleClick(item)"
                :class="{pointer: props.clickStep}"
            >
                <!-- <p class="line" :class="{'line-active': props.active >= item.step}">
                </p> -->
                <span class="circle" :class="{active: props.active >= item.step}">
                    <!-- {{item.step}} -->
                    <i v-if="item.step==1" class="iconfont icon-a-11x"></i>
                    <i v-if="item.step==2" class="iconfont icon-a-21x"></i>
                </span>
                <span class="title" :class="{'title-active': props.active >= item.step}">{{item.title}}</span>
                <img class="arrow" src="~@/assets/img/topic/arrow.png" alt="">
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    // 当前步骤
    active: {
        type: [String, Number],
        default: 1
    },
    data: {
        type: Array,
        default: () => []
    },
    // 步骤可否点击
    clickStep: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['on-click'])
function handleClick(item){
    console.log(123)
    emit('on-click', item)
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.steps{
    display: flex;
    justify-content: center;
    align-items: center;
    width:720px;
    margin: 0 auto;
    .step-item{
        display: flex;
        align-items: center;
        .circle{
            text-align: center;
            display: inline-block;
            width:32px;
            height:32px;
            border-radius: 50%;
            background: #F7F7F7;
            font-size: 16px;
            // font-weight: bold;
            color: #AAAAAA;
            line-height: 32px;
        }
        .active{
            background: #E7F1FF;
            color: #0084F6;
        }
        .title{
            font-size: 14px;
            color: #999FA7;
            line-height: 22px;
            margin-left: 8px;
        }
        .title-active{
            color: #222222;
        }
        .arrow {
            width: 66px;
            height: 15px;
            margin: 0 12px;
        }
        
    }
    .pointer{
        cursor: pointer;
    }
    & .step-item:last-child .arrow{
        display: none;
    }

}
 
</style>
